<template>
  <section>
    <!--start 面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>设置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/set/departmentStaff'}">部门与员工</el-breadcrumb-item>
        <el-breadcrumb-item>新增账号</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--end 面包屑-->
    <!--start content-->
    <div class="wrap" ref="companyWrap">
      <el-form :model="addNewAccountForm" :rules="rules" ref="addForm" label-width="100px" class="contentWrap formFontSizeMini scroll">
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="title">基础信息</div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="登录账号" prop="operatorAccount">
              <el-input v-model="addNewAccountForm.operatorAccount" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="密码" prop="operatorLoginPassword">
              <el-input type="password" v-model="addNewAccountForm.operatorLoginPassword" @input="p_len"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="" class="passG">
              <span :span="5" class="passGrand" v-bind:class="{ lovercase_valid: contains_sm }" :style="{background:ruo}">弱</span>
              <span :span="5" class="passGrand" v-bind:class="{ number_valid: contains_mid }" :style="{background:zhong}">中</span>
              <span :span="5" class="passGrand" v-bind:class="{ uppercase_valid: contains_big }" :style="{background:qing}">强</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="确认密码" prop="againPass">
              <el-input type="password" v-model="addNewAccountForm.againPass" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="addNewAccountForm.name" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机" prop="phone">
              <el-input v-model="addNewAccountForm.phone" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="部门" prop="department">
            	<div class="departmentSelectDiv">
            		<span @click.stop="departmentFn" :class="{active:treeShow}">{{addNewAccountForm.department}}</span>
            		<i class="el-icon-caret-bottom" :class="{up:treeShow}"></i>
            		<transition name="selectSlide">
	            		<el-tree
	            			v-show="treeShow"
	            			class="departmentTree"
	                  :data="tree"
	                  :props="defaultProps"
	                  node-key="treeCode"
	                  accordion
	                  :expand-on-click-node="false"
	                  @node-click="handleNodeClick">
	                </el-tree>
                </transition>
            	</div>
              <!--<el-select class="selectWidth" popper-class="paddingNone" v-model="addNewAccountForm.department">
                <el-option style="height: inherit" value="null">
                <el-tree
                  style="border: 0px"
                  :data="tree"
                  :props="defaultProps"
                  node-key="treeCode"
                  accordion
                  :expand-on-click-node="false"
                  @node-click="handleNodeClick">
                </el-tree>
                </el-option>
              </el-select>-->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="职位">
              <el-select class="selectWidth" v-model="addNewAccountForm.position" placeholder="请输入联系人职位名称">
                <el-option v-for="(item,index) in addNewAccountForm.positionList"  :value="item.ddlistName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="Email" prop="email">
              <el-input v-model="addNewAccountForm.email" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="QQ" prop="qq">
              <el-input v-model="addNewAccountForm.qq" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="title fl">权限设置</div>
            <span class="tips">权限与角色关联，选择该账号的角色可完成权限设置<em class="iconfont">&#xe60d;</em></span>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="powerCheckbox">
          <el-col :span="14">
            <el-form-item label="账号权限" prop="type">
              <el-checkbox-group v-model="addNewAccountForm.type">
                <el-checkbox class="el-checkbox" label="系统管理员" name="type"></el-checkbox>
                <el-checkbox label="业务负责人" name="type"></el-checkbox>
                <el-checkbox label="订单审核员" name="type"></el-checkbox>
                <el-checkbox label="财务审核员" name="type"></el-checkbox>
                <el-checkbox label="发货审核员" name="type"></el-checkbox>
                <el-checkbox label="业务经理" name="type"></el-checkbox>
                <el-checkbox label="仓库管理员" name="type"></el-checkbox>
                <el-checkbox label="资料维护员" name="type"></el-checkbox>
                <el-checkbox label="自定义角色一" name="type"></el-checkbox>
                <el-checkbox label="自定义角色二" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <span class="tipsLeft" >权限明细</span>
          </el-col>
        </el-row>
        <table class="addAccount" cellpadding="0" cellspacing="0">
          <tr>
            <td>订单</td>
            <td>
              <el-form-item  prop="type" label="">
                <el-checkbox-group v-model="addNewAccountForm.type">
                  <el-checkbox class="tableCheckbox" label="订单查看" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="订单导出" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="订单审核" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="订单修改" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="订单作废" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="订单删除" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="财务审核" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="出库审核" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="订单发货确认" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="订单退回" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="代下订单" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="退单查看" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="退单导出" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="退单审核" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="退单作废" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="退单删除" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="退单确认" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="退单收货确认" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="退单瑞惠" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="代下退单" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="出库/发货记录" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="订单商品统计查看" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="订单商品统计导出" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="发货统计查看" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="发货统计导出" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>商品</td>
            <td>
              <el-form-item  prop="type" label="">
                <el-checkbox-group v-model="addNewAccountForm.type">
                  <el-checkbox class="tableCheckbox" label="商品查看" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="商品导出" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="商品管理" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="商品删除" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="商品类别管理" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="库存管理" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="供应商查看" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="供应商管理" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="采购订单管理" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="智能采购" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="采购订单导出" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="商品收发存汇总查看" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="库存成本管理" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="促销查看" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="促销管理" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="商品分享" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>客户</td>
            <td>
              <el-form-item  prop="type" label="">
                <el-checkbox-group v-model="addNewAccountForm.type">
                  <el-checkbox class="tableCheckbox" label="客户查看" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="客户导出" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="客户管理" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="客户删除" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="客户级别设置" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="归属区域设置" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="加盟信息管理" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="反馈查看" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="反馈回复" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="反馈删除" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="报价单查看" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>资金</td>
            <td>
              <el-form-item  prop="type" label="">
                <el-checkbox-group v-model="addNewAccountForm.type">
                  <el-checkbox class="tableCheckbox" label="收款确认" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="资金账户充值/导入" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="资金账户扣款" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="收款账户管理-在线支付" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="收款账户管理-线下支付" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="收支明细查看" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="收支明细导出" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="订单收款统计查看" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="订单收款统计导出" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>通知</td>
            <td>
              <el-form-item  prop="type" label="">
                <el-checkbox-group v-model="addNewAccountForm.type">
                  <el-checkbox class="tableCheckbox" label="广告发布管理" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="通知管理" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="通知分类管理" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="短信充值" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="短信发送设置" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>报表</td>
            <td>
              <el-form-item  prop="type" label="">
                <el-checkbox-group v-model="addNewAccountForm.type">
                  <el-checkbox class="tableCheckbox" label="订单统计报表导出" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="地区统计报表导出" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="商品销售报表导出" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="客户订货报表导出" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="报表查看" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="利润报表查看" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>设置</td>
            <td>
              <el-form-item  prop="type" label="">
                <el-checkbox-group v-model="addNewAccountForm.type">
                  <el-checkbox class="tableCheckbox" label="我的账号" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="公司信息" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="系统设置" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="业务流程设置" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="订单审核区域变更" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="部门管理" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="账号权限管理" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="操作日志" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox"  label="应用中心设置" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>辅助</td>
            <td>
              <el-form-item  prop="type" label="">
                <el-checkbox-group v-model="addNewAccountForm.type">
                  <el-checkbox class="tableCheckbox" disabled label="禁止查看商品价格与订单金额" name="type"></el-checkbox>
                  <el-checkbox class="tableCheckbox" disabled  label="查看商品成本价" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </td>
          </tr>
        </table>
        <div class="btnBox">
          <el-button class="footbtn" type="primary" :disabled="clickBtn" @click="sureAccount">保存</el-button>
          <el-button class="footbtn" @click="cancelAccount">取消</el-button>
        </div>
      </el-form>
    </div>

    <!--end content-->
  </section>
</template>

<script>
  export default {
    data(){
      var phone = (rule, value, callback) => {              //手机号格式验证
        if (!value) {
          return callback(new Error('手机号不能为空'));
        }
        if (/^(13[0-9]|14[57]|15[012356789]|177|18[012356789])\d{8}$/.test(value)!=true) {
            callback(new Error('请输入正确的手机号格式'));
        }else {
            callback();
        }
      };

      var  passInput=(rule, value, callback)=>{
        if (!value) {
          return callback(new Error('密码不能为空'));
        }
        if (!/^[a-zA-Z0-9]{6,20}$/.test(value)) {
          callback(new Error("密码为6-20位字母或数字！"));
        }else {
          callback();
        }
      };

      var againPass=(rule, value, callback)=>{              //再次确认密码
        if (!value) {
          return callback(new Error('确认密码不能为空'));
        }
        if (this.addNewAccountForm.operatorLoginPassword!=value) {
            callback(new Error('两次密码输入必须一致'));
        }else {
            callback();
        }
      };

      var email=(rule, value, callback)=>{              //email验证
        if (value=='') {
            callback();
        }
        if (! /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(value)) {
            callback(new Error('邮箱格式不正确'));
        }else {
            callback();
        }
      };
      var qq=(rule, value, callback)=>{              //qq验证
        if (value=='') {
          callback();
        }
        if (!/^\d{5,15}$/.test(value)) {
            callback(new Error('QQ号格式不正确'));
        }else {
            callback();
        }
      };

      return {
      	clickBtn:false,                 //请求数据后禁用按钮		
      	treeShow:false,
        contains_sm: false,
        contains_mid: false,
        contains_big: false,
        qing:false,								//强
        zhong:false,							//中
        ruo:'',									//弱
        addNewAccountForm:{                 //form表单数据
          operatorAccount:'',
          operatorLoginPassword:null,
          againPass:'',
          name:'',
          phone:'',
          department:'请选择',
          departmentCode:0,
          position:'',
          positionList:'',
          email:'',
          qq:'',

          type:[],
        },
        rules:{
          operatorAccount:[{required: true, message: '登录账号不能为空', trigger: 'blur'},
			            { required: true, min:4,message: '登录账号至少四位', trigger: 'blur' }
          ],
          operatorLoginPassword:[{required: true,validator:passInput, trigger: 'blur'}],
          againPass:[{required: true, validator: againPass, trigger: 'blur'}],
          name:[{required: true, message: '姓名不能为空', trigger: 'blur'}],
          phone:[{required: true,validator: phone, trigger: 'blur'}],
          email:[{required: false,validator: email, trigger: 'blur'}],
          qq:[{required: false,validator: qq, trigger: 'blur'}]
        },
        data:[],

         tree: [],
        defaultProps: {
          children: 'children',
          label: 'treeName'
        },
      }
    },

    methods:{
//--------------------密码强度验证  start---------------------
      p_len() {
        this.contains_sm =false;
        this.contains_mid=false;
        this.contains_big=false;
        this.qing="";
        this.zhong="";
        this.ruo=""
        let ostr = this.addNewAccountForm.operatorLoginPassword;
        if (ostr.length>=6) {
          if(/[a-z]+/.test(ostr) || /[A-Z0-9]+/.test(ostr) || /[A-Z]+/.test(ostr)){
            this.contains_sm =true;
            this.contains_mid=false;
            this.contains_big=false;
            this.ruo="#fe8486";
            this.qing="";
            this.zhong="";
          }
          if(/[a-zA-Z]+/.test(ostr) && /[0-9]+/.test(ostr)){
            this.contains_mid =true;
            this.contains_sm=true;
            this.contains_big=false;
            this.zhong="#f9c842";
            this.ruo="#f9c842";
            this.qing="";
          }
          if(/[a-z]+/.test(ostr) && /[A-Z]+/.test(ostr) && /[0-9]+/.test(ostr)){
            this.contains_big =true;
            this.contains_sm=true;
            this.contains_mid=true;
            this.qing="#00c292";
            this.zhong="#00c292";
            this.ruo="#00c292"
          }
      }else{
					this.ruo="";
					this.qing="";
					this.zhong="";
				}
      },

//--------------------新增账号取消   start------------------
      cancelAccount(){
        this.$router.push('/set/departmentStaff');
        this.$refs.addForm.resetFields();
      },
      sureAccount(){
        this.$refs.addForm.validate((valid) => {
          if (valid) {
          	this.clickBtn=!this.clickBtn;	
            this.axios({
              method: 'post',
              url: '/v3/member/operators',
              data: {
                "operatorAccount":this.addNewAccountForm.operatorAccount,
                "operatorName":this.addNewAccountForm.name,
                "operatorPhone":this.addNewAccountForm.phone,
                "operatorLoginPassword":this.md5(this.addNewAccountForm.operatorLoginPassword).toUpperCase(),
                "deptmentCode":this.addNewAccountForm.departmentCode,
                "operatorPosition":this.addNewAccountForm.position,
                "operatorEmail":this.addNewAccountForm.email,
                "operatorQq":this.addNewAccountForm.qq,
              }
            }).then((res) => {
                this.$router.push('/set/departmentStaff');
                this.$refs.addForm.resetFields();
                this.clickBtn=!this.clickBtn;	
                this.$notify({
						          message: '操作成功！',
						          type: 'success',
						          duration: 3000
					   		    });
            }).catch((err)=>{
            	this.clickBtn=!this.clickBtn;	
            	this.$notify.error({
						          message: err.response.data,
						          duration: 3000
						        });
            });
          } else {
            this.openError('请完善所填信息');
            return false;
          }
        });
      },

//--------------------tree的属性   start--------------------
      handleNodeClick(data) {
      	this.addNewAccountForm.departmentCode = data.treeCode;
        this.addNewAccountForm.department = data.treeName;
        this.treeShow = false;
      },
//---------------------------右上角成功提示   start---------------------------
      openSuccess(msg) {
        this.$notify({
          message: msg,
          type: 'success',
          duration: 3000
        });
      },
//---------------------------右上角失败提示   start---------------------------
      openError(msg) {
        this.$notify({
          message: msg,
          type: 'error',
          duration: 3000
        });
      },
      departmentFn(){
      	this.treeShow = !this.treeShow;
      }
    },
    created() {
      /* 请求职位 */
      this.axios({
        method: "post",
        url: "/v3/basic/ddlists/00100000004/listAll",
        data:{}
      }).then((res) => {
          this.addNewAccountForm.positionList = res.data.list
      }).catch((error) => {
       		this.Public.openError(this,err.response.data)
      })

      /* 请求部门 */
     this.axios({
				method: 'GET',
				url: "/v3/member/depts/queryTree"
			}).then((res) => {
					this.tree = res.data;
			}).catch((err)=>{
				this.Public.openError(this,err.response.data)
			});
    },
    mounted(){
      document.querySelector(".contentWrap").style.height = (document.documentElement.clientHeight-180)+'px';
      document.querySelector("body").onclick = ()=>{this.treeShow = false}
			//console.log(document.querySelector(".departmentTree").style)
    }

  }
</script>

<style scoped>

  .passG span {
    display: inline-block;
    text-align: center;
    color: #fff;
    background-color: #e9ecf3;
    width: 110px;
    height: auto;
    font-size: 14px;
    height: 20px;
    margin-right: 1px;
    line-height: 20px;
    text-align: center;
    border-radius: 2px;
    color: rgba(71, 87, 98, 0.8);
    /*background: -webkit-linear-gradient(left, #00AD7C 50%, #eee 50%);*/
    /*background: linear-gradient(to right, #00AD7C 50%, #eee 50%);*/
    background-size: 201% 100%;
    background-position: right;
    -webkit-transition: background .3s;
    transition: background .3s;
  }

  .lovercase_valid,
  .number_valid,
  .uppercase_valid {
    background-position: left !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }


  .wInput{
    width: 384px;
  }

  .height-s-con {
    position: absolute;
    width: 100%;
    height: 300px;
    top: 0;
    left: 0;
    padding: 30px;
    z-index: 1005;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
    overflow: hidden;
  }

  .search-title {
    font-size: 16px;
    border: 0;
    color: #415161;
    margin-bottom: 20px;
  }

  .fade-enter-active, .fade-leave-active {
    transition: .4s;
  }

  .fade-enter, .fade-leave-active {
    opacity: 0;
  }

  .slideDown-enter-active, .slideDown-leave-active {
    transition: .4s;
  }

  .slideDown-enter, .slideDown-leave-active {
    height: 0;
    opacity: 0;
  }

  .resetPass{
    text-align: center;
    display: block;
    cursor: pointer;
  }

  .delPhone{
    text-align: center;
    display: block;
    cursor: pointer;
  }


  .tableCheckbox{
  width: 205px;
  margin-right: 0px!important;
  height: 20px!important;
  line-height: 20px!important;
}

  .addAccount{
   border: 1px solid #e7e9f1;
    margin-top: 8px;
    width: 100%;
  }

  .addAccount tr td {
    padding: 4px 8px;
    border-bottom: 1px solid #e7e9f1;
  }

  .addAccount tr td:first-child{
    width: 100px;
    text-align: center;
    background: #eff1f8;
  }

  .tipsLeft{
    margin-left: 38px;
  }

  .el-checkbox{
    margin-left: 0px!important;
    margin-right: 15px;
  }

  .tips{
    line-height: 25px;
    color: rgb(147, 166, 183);
    margin-left: 10px;
  }
  .tips em{
   font-size: 15px;
    margin-left: 4px;
    cursor: pointer;
    color: rgb(147, 166, 183);
  }

  .tips em:hover{
    color: #f6b55a;
  }

  section {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  div.location {
    flex: 0 0 10px;
    padding: 3px 0 15px 0;
  }

  div.wrap {
    position: relative;
    flex: 1;
    width: 100%;
    padding: 15px 20px 0 20px;
    box-sizing: border-box;
    background: #fff;
  }

  .contentWrap{
    overflow-y: auto;
  }

  .scroll {
    overflow-y: auto;
    overflow-x:hidden;
    padding-right: 10px;
  }
  .title {
    height: 50px;
    color: #03B8CC;
    font-size: 16px;
  }
  .selectWidth {
    width: 100%;
  }
  .btnBox {
		bottom: 20px;
		position: absolute;
		width: 87%;
		background: #fff;
		height: 45px;
		line-height: 45px;
		z-index: 10;
  }
  /* start upload */

  .avatar-uploader-icon {
    font-size: 20px;
    color: #8c939d;
    width: 95px;
    height: 95px;
    line-height: 95px;
    text-align: center;
  }
  .avatar {
    width: 95px;
    height: 95px;
    display: block;
  }
  /* end upload */
 /* start 部门下拉的样式 */
.departmentSelectDiv {
	position: relative;
	width: 100%;
	height: 36px;
	line-height: 36px;
}
.departmentSelectDiv>span{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 36px;
	border:1px solid rgb(191, 212, 217);
	border-radius: 4px;
	font-size: 12px;
	padding-left: 10px;
	cursor: pointer;
}
.departmentSelectDiv>span:hover{
	border-color: rgb(131, 156, 165);
}
.departmentSelectDiv>span:active{
	border-color: #03b8cc;
}
.departmentSelectDiv>span:visited{
	border-color: #03b8cc;
}
.departmentSelectDiv>span:focus{
	border-color: #03b8cc;
}
.departmentSelectDiv>span.active{
	border-color: #03b8cc;
}
.departmentSelectDiv>i{
	position: absolute;
	top: 0;
	right: 0;
	width: 35px;
	height: 36px;
	line-height: 38px;
	text-align: center;
	color: rgb(191, 212, 217);
	transition: .3s;
	font-size: 12px;
}
.departmentSelectDiv>i.up{
	transform: rotate(180deg);
}
.departmentTree {
	position: absolute;
	width: 100%;
	top: 42px;
	left: 0;
	border-radius: 2px;
	box-shadow:0 2px 4px rgba(0,0,0,.12), 0 0 6px rgba(0,0,0,.04);
	z-index: 2;
	font-size: 12px;
	overflow-y: auto;
	height: 200px;
}
.selectSlide-enter-active, .selectSlide-leave-active {
    transition: .4s;
  }

  .selectSlide-enter, .selectSlide-leave-active {
    height: 0;
    opacity: 0;
  }
 /* end 部门下拉的样式 */
*{
	box-sizing: border-box;
	transition: .2s;
}
</style>
